<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link rel="stylesheet" href="framework/bootstrap/css/bootstrap.min.css" />
    </head>
    <body>
    	<div class="container">
    		<div class="row">
    			<div class="col-xs-12">
    				<div class="panel panel-primary text-center">
    					<div class="panel-heading">
    						<h1 class="panel-title">空气质量检测信息库</h1>
    					</div>
    					<div class="panel-body">
    						<div class="navbar navbar-default">
    							<div class="navbar-header">
    								<div class="navbar-brand">按区域查询</div>
    							</div>
    							<div class="navbar-form">
    								<form id="frm" action="init.do" method="post" class="form-horizontal">
    									<input type="hidden" name="cp" id="cp" value="${pb.pip.currentPage}" />
    									<div class="form-group">
    										<select name="areaname" class="form-control">
    											<c:forEach items="${area }" var="a">
    											<option value="${a.areaname }">${a.areaname }</option>
    											</c:forEach>
    										</select>
    										<button class="btn btn-default">查找</button>
    									</div>
    								</form>
    							</div>
    							<c:if test="${empty pb}">
    								<div class="col-xs-offset-3 col-xs-6">
    									<p class="text-center">抱歉，暂无数据！</p>
    								</div>	
    							</c:if>
    							<c:if test="${not empty pb}">
    							<table class="table table-striped table-bordered table-hover text-center">
    								<tr>
    									<th class="text-center">序号</th>
    									<th class="text-center">区域</th>
    									<th class="text-center">检测时间</th>
    									<th class="text-center">pm10数据</th>
    									<th class="text-center">pm2.5数据</th>
    									<th class="text-center">监测站</th>
    								</tr>
    								<c:forEach items="${pb.data }" var="air">
    								<fmt:formatDate value="${air.mtime}" pattern="yyyy-MM-dd" var="mt"/>
    								<tr>
    									<td>${air.airid}</td>
    									<td>${air.areaname}</td>
    									<td>${mt}</td>
    									<td>${air.pm10}</td>
    									<td>${air.pm25}</td>
    									<td>${air.station}</td>
    								</tr>
    								</c:forEach>
    							</table>
    							</c:if>
    						</div>
    					</div>
    					<c:if test="${not empty pb}">
    					<div class="panel-footer">
    						<ul class="pagination">
    							<li><a href="javascript:;" onclick="jump(1)">首页</a></li>
    							<li><a href="javascript:;" onclick="jump(${pb.prev})">上页</a></li>
    							<li><a href="javascript:;" onclick="jump(${pb.next})">下页</a></li>
    							<li><a href="javascript:;" onclick="jump(${pb.countPage})">尾页</a></li>
    						</ul>
    					</div>
    					</c:if>
    				</div>
    			</div>
    		</div>
    	</div>
    	
    	
    <script type="text/javascript" src="framework/jquery/jquery-1.11.0.min.js" ></script>	
    <script type="text/javascript" src="framework/bootstrap/js/bootstrap.min.js" ></script>	
 	<script type="text/javascript" >
 		function jump(pg){
 			$('input[name=cp]').val(pg);
 			$('#frm').submit();
 		}
 	</script>
    </body>
</html>